import { Card,Avatar } from "antd";
import { UserOutlined } from '@ant-design/icons'
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router";
import {Getuser}from '../../store/action/index'
import Listitem from '../../compoment/list'
import Fromnow from '../../compoment/fromnow'

function User(){
  let{username}=  useParams()
  let getData=Getuser()
  let {data,loading}=useSelector(state=>state.user)
  let {recent_topics=[],recent_replies=[],create_at,loginname,avatar_url,githubUsername,score}=data
  useEffect(()=>{
      getData(username)
  },[username])
    return <div className='user_page'>
            <Card loading={loading}>
                <div className='userinfo'>
                <Avatar icon={<UserOutlined />} src={avatar_url} title={loginname}/>
                <p>分数：{score} 注册时间：<Fromnow data={create_at}/>   github : <a href={`https://github.com/${githubUsername}`}>
                https://github.com/{githubUsername}
                    </a></p>
                </div>
            </Card>
            <Card loading={loading} title={'最近创建的话题'} type={'inner'}>
                <Listitem  loading={loading} data={recent_topics} />
            </Card>
            <Card loading={loading} title={'最近参与的话题'} type={'inner'}>

            <Listitem  loading={loading} data={recent_replies} />
            </Card>
    </div>
}

export default User